<template>
  <div class="haed">
    <div style="height: 18px"></div>
    <div class="haed-ss">
      <input type="text" placeholder="请输入搜索内容" />
      <img src="../images/ssp.png" alt="" />
    </div>
    <span class="tx"><img src="../images/tx.png" alt="" /></span>
    <div class="name">
      <span class="n1">张慈欣，</span><span class="n2">你好！</span>
      <div class="sr">
        <div class="kg">
          <span class="t" id="t">本月收入</span><span class="t">￥</span
          ><span class="xt">9,999.</span><span class="t">00</span>
        </div>
        <div class="box-jdt"><div class="jdt"></div></div>
        <div class="kg">
          <span class="t" id="t">本月支出</span><span class="t">￥</span
          ><span class="xt">1,999.</span><span class="t">00</span>
        </div>
        <div class="box-jdt"><div class="jdt2"></div></div>
      </div>
      <div class="kc">
        <div class="kf">
          <img src="../images/kfkc.png" alt="" /> <span>132</span>
        </div>
        <div class="zh">
          <img src="../images/zhxx.png" alt="" />
          <nav>
            <span class="sm">+</span><span>23</span><span class="sm">入住</span>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <ul class="nav">
    <li>
      <span><img src="../images/yykf.png" alt="" /></span>
      <p>预约看房</p>
    </li>
    <li>
      <span><img src="../images/wxgd.png" alt="" /></span>
      <p>维修工单</p>
    </li>

    <li>
      <span><img src="../images/tsgd.png" alt="" /></span>
      <p>投诉工单</p>
    </li>
    <li>
      <span><img src="../images/qbht.png" alt="" /></span>
      <p>全部合同</p>
    </li>
    <li>
      <span><img src="../images/xjht.png" alt="" /></span>
      <p>新建合同</p>
    </li>
  </ul>
  <div class="ht">
    <h3>待确认合同</h3>
    <span>还有8份合同待确认,打个电话吧~</span
    ><img src="../images/ddd.png" alt="" />
  </div>
  <ul class="qrht">
    <li>
      <h3>李宇辉</h3>
      <img class="dz" src="../images/dz.png" alt="" /><span>盛和苑</span>
      <p>1栋1单元102室</p>
      <p>两人间 ￥1200/月</p>
      <img class="dh" src="../images/dh.png" alt="" />
    </li>
    <li>
      <h3>赵宇辉</h3>
      <img class="dz" src="../images/dz.png" alt="" /><span>盛和苑</span>
      <p>1栋1单元102室</p>
      <p>两人间 ￥1200/月</p>
      <img class="dh" src="../images/dh.png" alt="" />
    </li>
    <li>
      <h3>刘宇辉</h3>
      <img class="dz" src="../images/dz.png" alt="" /><span>公园茂公园茂</span>
      <p>1栋1单元102室</p>
      <p>两人间 ￥1200/月</p>
      <img class="dh" src="../images/dh.png" alt="" />
    </li>
    <li>
      <h3>杜宇辉</h3>
      <img class="dz" src="../images/dz.png" alt="" /><span>公园茂公园茂</span>
      <p>1栋1单元102室</p>
      <p>两人间 ￥1200/月</p>
      <img class="dh" src="../images/dh.png" alt="" />
    </li>
  </ul>
  <div class="ht">
    <h3>待收租金</h3>
    <span>近期还有代收租金哦~</span><img src="../images/ddd.png" alt="" />
  </div>
  <ul class="dszj">
    <li>
      <div class="l">
        <h3>孙宇辉<span class="oranges">3天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>
        <span>待收租金</span>
        <span class="orange">￥1200</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
    <li>
      <div class="l">
        <h3>孙宇辉<span class="orangess">10天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>
        <span>待收租金</span>
        <span class="orange">￥1200</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
    <li>
      <div class="l">
        <h3>孙宇辉<span class="greens">15天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>
        <span>待收租金</span>
        <span class="orange">￥1200</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
  </ul>
  <div class="ht">
    <h3>合同到期</h3>
    <span>有13位租客合同即将到期,提醒续约吧~</span
    ><img src="../images/ddd.png" alt="" />
  </div>
  <ul class="dszj">
    <li>
      <div class="l">
        <h3>孙宇辉<span class="oranges">3天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>

        <span class="orange" id="tim">2022年12月04日到期</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
    <li>
      <div class="l">
        <h3>孙宇辉<span class="orangess">10天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>

        <span class="orange" id="tim">2022年12月04日到期</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
    <li>
      <div class="l">
        <h3>孙宇辉<span class="greens">15天</span></h3>
        <p>1栋2单元302</p>
        <img src="../images/dz.png" alt="" />
        <span>朗悦·公园道1号·玺园</span>
      </div>
      <div class="r">
        <p class="orange">押一付三</p>

        <span class="orange" id="tim">2022年12月04日到期</span>
        <p>入住时间:2021年12月27日</p>
      </div>
      <div class="foot">
        <p class="grn"></p>
        <span>电费正常</span>
        <p class="rd"></p>
        <span>水费正常</span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {};
</script>
<style scoped>
.haed {
  width: 323px;
  height: 270px;
  background: #0e47fe;
  border-radius: 0px 0px 40px 40px;
  padding: 0 26px;
  padding-top: 20px;
  background-image: url(../images/tbbj.png);
  background-size: 256px;
  background-repeat: no-repeat;
  background-position: 143px 29px;
  margin-bottom: 46px;
  margin: auto;
}

.haed-ss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.haed-ss img {
  width: 20px;
  height: 20px;
  align-content: center;
}
.haed-ss input {
  background-image: url(../images/ss.png);
  background-size: 26px;
  background-repeat: no-repeat;
  background-position: 16px 3px;
  display: block;
  border: none;
  width: 293px;
  height: 30px;
  background-color: #616fee;
  border-radius: 20px 20px 20px 20px;
  font-size: 15px;
  color: #fff;
  text-indent: 48px;
}
:-ms-input-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}
:-moz-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}
::-webkit-input-placeholder {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
}
.tx {
  width: 65px;
  height: 65px;
  border: 50%;
}
.tx img {
  width: 65px;
  height: 65px;
  border: 50%;
  position: absolute;
  top: 86px;
}
.name {
  position: absolute;
  top: 160px;
  color: #fff;
}
.name .n1 {
  font-size: 20px;
  font-weight: 700;
}
.name .n2 {
  font-size: 14px;
  font-weight: 500;
}
.sr {
  color: #fff;
  position: absolute;
  top: -73px;
  left: 143px;
}
.sr .kg {
  margin-top: 14px;
}
.sr #t {
  margin-right: 34px;
}
.sr .t {
  font-size: 14px;
}
.sr .xt {
  font-size: 20px;
}

.sr .box-jdt {
  width: 180px;
  height: 10px;
  background-color: #7caeff;
  border-radius: 5px;
  margin-top: 2px;
}
.sr .jdt {
  width: 160px;
  height: 10px;
  border-radius: 5px;
  background-color: #13f2ff;
}
.sr .jdt2 {
  width: 50px;
  height: 10px;
  border-radius: 5px;
  background-color: #fdb207;
}
.kc {
  width: 323px;
  position: absolute;
  top: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.kc div {
  background-color: #fff;
  width: 156px;
  height: 102px;
  box-shadow: 0px 4px 30px -12px rgba(14, 71, 254, 0.29);
  border-radius: 20px 20px 20px 20px;
  position: relative;
}
.kc .kf {
  background-image: url(../images/kff.svg);
  background-size: 107px;
  background-repeat: no-repeat;
  background-position: 6px 4px;
}
.kc .zh {
  background-image: url(../images/zh.png);
  background-size: 107px;
  background-repeat: no-repeat;
  background-position: 16px 14px;
}
.kc img {
  width: 89px;
  height: 26px;
  position: absolute;
  top: 18px;
  left: 50px;
}
.kc span {
  font-size: 32px;
  color: #fdb207;
  font-weight: 700;
}
.kf span {
  position: absolute;
  top: 46px;
  right: 17px;
}
.zh nav {
  position: absolute;
  top: 46px;
  right: 17px;
}
.zh .sm {
  font-size: 20px;
}
.nav {
  display: flex;
  width: 323px;
  margin: 0 auto;
  padding-top: 40px;
  justify-content: space-around;
}
.nav li {
  text-align: center;
}
.nav span {
  width: 40px;
  height: 40px;
}
.nav img {
  width: 40px;
  height: 40px;
}
.nav p {
  font-size: 12px;
  line-height: 30px;
}
.ht {
  width: 323px;
  margin: 0 auto;
  position: relative;
  margin-top: 15px;
  margin-bottom: 22px;
}
.ht img {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
}
.ht h3 {
  font-size: 16px;
  position: absolute;

  left: 0;
}
.ht span {
  font-size: 10px;
  color: #979797;
  position: absolute;
  left: 70px;
  top: 4px;
}
.qrht {
  width: 323px;
  margin: 0 auto;
  margin-bottom: 22px;
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.qrht li {
  width: 130px;
  height: 60px;
  padding: 12px;
  position: relative;
  border-radius: 20px;
  box-shadow: 0px 4px 9px 0px rgba(14, 71, 254, 0.09);
  opacity: 1;
  background-image: url(../images/htbj.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0;
  margin: 10px 0;
}
.qrht li .dz {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 18px;
  right: 60px;
}
.qrht li .dh {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 48px;
  right: 14px;
}
.qrht li span {
  width: 40px;
  position: absolute;
  top: 14px;
  right: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qrht li h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #35417d;
}
.qrht li p {
  line-height: 20px;
  font-size: 10px;
  color: #979797;
}
.dszj {
  width: 323px;
  margin: 0 auto;
  margin-top: 50px;
}
.dszj li {
  height: 102px;
  border-radius: 20px;
  background: #fff;
  padding: 10px;
  position: relative;
}
.dszj .l {
  position: absolute;
  left: 15px;
}
.dszj .l h3 {
  font-size: 16px;
  margin-bottom: 5px;
  color: #35417d;
}
.dszj .l h3 span {
  width: 22px;
  height: 16px;
  margin-left: 8px;
  border-radius: 5px;
  font-size: 10px;
  padding: 3px 5px;
  color: #fff;
}
.dszj .l .oranges {
  background-color: #ff9534;
}
.dszj .l .greens {
  background-color: #34d196;
}
.dszj .l .orangess {
  background-color: #ff5f33;
}
.dszj .l p {
  font-size: 10px;
  margin-top: 10px;
  color: #8f95b2;
}
.dszj .l img {
  width: 10px;
  height: 12px;
  margin-top: 5px;
}
.dszj .l span {
  font-size: 12px;
  color: #8f95b2;
  margin-left: 2px;
}
.dszj .r {
  margin-top: 15px;
  position: absolute;
  right: 15px;
  text-align: right;
}
.dszj .r p {
  font-size: 10px;
  color: #8f95b2;
  letter-spacing: 0.5px;
}
.dszj .r #tim {
  font-size: 14px;
}
.dszj .r .orange {
  color: #f9ab21;
}
.dszj .r span {
  font-size: 16px;
  margin-left: 12px;
  font-weight: 700;
  color: #8f95b2;
  line-height: 20px;
}
.dszj li .foot {
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 293px;
  height: 29px;
  border-top: 2px #f2f5ff solid;
  display: flex;
}
.dszj li .foot p {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-top: 13px;
}
.dszj li .foot span {
  margin-right: 15px;
  margin-left: 5px;
  font-size: 12px;
  margin-top: 8px;
}
.dszj li .foot .grn {
  background-color: #34d196;
}
.dszj li .foot .rd {
  background-color: #ff673d;
}
</style>
  